<script lang="jsx" setup>
import { ref } from 'vue';
import { UUID } from 'uuidjs';
import { isEmpty } from 'lodash-es';
import { getTechniqueListData, getTechniqueParam } from '@/service/api/modules/trace/one-code-trace';

const column = [
  {
    key: 'dataIndex',
    dataIndex: 'dataIndex',
    title: '序号',
    width: 50,
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'techId',
    dataIndex: 'techId',
    title: '工序代码',
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true,
    width: 140
  },
  {
    key: 'techName',
    dataIndex: 'techName',
    title: '工序名称',
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true
  },
  {
    key: 'remark',
    dataIndex: 'remark',
    title: '设备名称',
    fixed: 'left',
    align: 'center',
    checked: true,
    ellipsis: true,
    customRender: ({ record }) => {
      return <span class="color-#646cff font-bold">{record.remark}</span>;
    }
  }
];
const tableData = ref([]);
const loading = ref(false);
const tableRef = ref(null);
const currentTitle = ref('');
const pnlId = ref(null);
const columnList = ref([]);

function setCurrentPnlId(id) {
  pnlId.value = id;
}

function getColumnConfig(fileName) {
  const file = import.meta.glob(`./technology-info-item/*.js`, { eager: true });
  let columnConfig;
  Object.entries(file).forEach(([path, config]) => {
    const pathArr = path.split('/');
    const fullPathFileName = pathArr[pathArr.length - 1];
    if (fullPathFileName === `${fileName}.js`) {
      columnConfig = config;
    }
  });
  return columnConfig.default;
}

function getData() {
  loading.value = true;
  getTechniqueListData()
    .then(({ data, error }) => {
      if (!error) {
        console.log(data);

        data.forEach((item, index) => {
          item.dataIndex = index + 1;
          item.tableUuid = UUID.generate();
        });
        tableData.value = data;
        getTechologyInfo(data[0]);
        tableRef.value.setCurrentRowId(data[0]);
      }
    })
    .finally(() => {
      loading.value = false;
    });
}

const currentData = ref({});
const techologyInfoLoading = ref(false);
function getTechologyInfo(row) {
  techologyInfoLoading.value = true;
  currentTitle.value = `${row.remark}工艺参数`;
  columnList.value = [];
  getTechniqueParam({
    techId: row.techId, // 工艺编码
    pnlId: pnlId.value // pnl码
  })
    .then(({ data, error }) => {
      if (!error) {
        console.log(data);
        currentData.value = data;
        if (!isEmpty(data)) {
          columnList.value = getColumnConfig(row.formLastName);
        }
      }
    })
    .finally(() => {
      techologyInfoLoading.value = false;
    });
}

function reset() {
  tableData.value = [];
  currentData.value = {};
  columnList.value = [];
  currentTitle.value = '';
}

defineExpose({
  getData,
  setCurrentPnlId,
  reset
});
</script>

<template>
  <div class="technology-info h-full w-full pt10px">
    <ARow class="h-full w-full" :gutter="16">
      <ACol :span="7" class="h-full">
        <Table
          ref="tableRef"
          :column="column"
          :show-row-selection="false"
          :data-source="tableData"
          :scroll="{ y: 'auto' }"
          is-init-get-data
          row-key="tableUuid"
          :is-pagination="false"
          class="h-full"
          :loading="loading"
          :show-card-header="false"
          :row-height="40"
          @table-row-click="getTechologyInfo"
        ></Table>
      </ACol>
      <ACol :span="17" class="techology-info-data h-full">
        <ACard size="small" class="h-full">
          <template #title>
            <div v-show="currentTitle" class="card-title">{{ currentTitle }}</div>
          </template>
          <AList
            size="small"
            :grid="{ gutter: 16, xs: 1, sm: 2, md: 2, lg: 3, xl: 3, xxl: 3 }"
            :data-source="columnList"
            :loading="techologyInfoLoading"
            class="h-full overflow-y-auto"
          >
            <template #renderItem="{ item }">
              <AListItem>
                <div class="info-item">
                  <div class="label">{{ item.title }}</div>
                  <div class="value">{{ currentData[item.key] }}</div>
                </div>
              </AListItem>
            </template>
          </AList>
        </ACard>
      </ACol>
    </ARow>
  </div>
</template>

<style lang="scss" scoped>
.technology-info {
  :deep(.ant-card) {
    .ant-card-body {
      padding-bottom: 0;
      .surely-table-wrapper {
        .ant-spin-nested-loading {
          .surely-table-column-title {
            color: #646cff;
            font-weight: bold;
          }
        }
      }
    }
  }
  .info-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  .info-item {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    flex-grow: 1;
    .label {
      color: #aeaeae;
      font-weight: bold;

      &::after {
        content: ':';
        margin: 0 3px;
      }
    }
    .value {
      flex: 1;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .techology-info-data {
    :deep(.ant-card) {
      .ant-card-body {
        height: calc(100% - 38px);
        .ant-row {
          margin-right: 0 !important;
        }
        .ant-spin-nested-loading {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .card-title {
    display: flex;
    align-items: center;
    &:before {
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #646cff;
      margin-right: 5px;
    }
  }
}
</style>
